<template>
	<view class="flex flex-row flex-row-center-start">
		<childNode
			@change="_checked = $event"
			ref="parentNodeRefNode"
			:followTheme="props.followTheme"
			v-if="!props.data['children']"
			:fieldNames="props.fieldNames"
			:data="props.data"
		></childNode>
		<parentNode
			ref="parentNodeRef"
			:followTheme="props.followTheme"
			v-if="props.data['children']"
			:fieldNames="props.fieldNames"
			:data="props.data"
		></parentNode>
		<TmIcon _class="pr-16" :color="nodeData['color']" :font-size="28" v-if="nodeData['icon']" :name="nodeData['icon']"></TmIcon>
		<TmText
			:color="_checked ? 'primary' : ''"
			:_class="nodeData['disabled'] && !props.data['children'] ? 'opacity-7' : ''"
			@click="textClick(nodeData)"
			:font-size="28"
			:label="nodeData.text"
		></TmText>
	</view>
</template>
<script lang="ts" setup>
import TmCheckbox from '../tm-checkbox/tm-checkbox.vue'
import TmIcon from '../tm-icon/tm-icon.vue'
import TmText from '../tm-text/tm-text.vue'
import childNode from './child-node.vue'
import parentNode from './parent-node.vue'
import { ref, getCurrentInstance, inject, computed, toRaw, watch, watchEffect, Ref } from 'vue'
import { baseNodeData } from './interface'
import { treeFlat } from './util'
const parentNodeRef = ref<InstanceType<typeof parentNode> | null>(null)
const parentNodeRefNode = ref<InstanceType<typeof childNode> | null>(null)
const proxy = getCurrentInstance()?.proxy ?? null
const emits = defineEmits(['textClick'])
const props = defineProps({
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	/**
	 * 数据
	 * @description 生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射，如果你的唯一标识字段不是Id的话。
	 */
	data: {
		type: Object,
		default: () => {},
		required: true
	},
	/**
	 * 数据结构字段的映射表。
	 */
	fieldNames: {
		type: Object,
		default: () => {
			return {
				id: 'id',
				text: 'text'
			}
		}
	}
})
const _checked = ref(false)
//父级方法。
let parent = proxy.$parent
while (parent) {
	if (parent?.TreeParaentName == 'tmTree' || !parent) {
		break
	} else {
		parent = parent?.$parent ?? undefined
	}
}

const color = parent?.$props.color ?? 'primary'
const nodeData = computed(
	() =>
		<baseNodeData>{
			icon: props.data['icon'] ?? '', //节点图标。
			color: props.data['color'] || color, //节点颜色主题
			disabled: props.data['disabled'] ?? false, //节点是否禁用
			text: props.data[props.fieldNames.text], //节点标题
			id: props.data[props.fieldNames.id] //节点标识
		}
)

function textClick(node: baseNodeData) {
	//如果存在子级。
	if (!props.data['children']) {
		parentNodeRefNode.value?.setStatus()
	}
	emits('textClick', node)
}
</script>
